<template>
    <!-- 多级表头 -->
    <el-table-column v-if=" columns.children&& columns.children[0]" v-bind=" columns">
        <girdColumn :columns="item" v-for="(item,i) in  columns.children" :key="i"> </girdColumn>
        <!-- 自定义表头 -->
        <template :slot="columns.headerSlotName?'header':''" slot-scope="scope">
            <slot :name=" columns.headerSlotName" :scope="scope"></slot>
        </template>
    </el-table-column>
    <!-- 需要用到插槽 -->
    <el-table-column v-else-if="columns.type==='slot'||columns.type==='expand'||columns.type==='html'||columns.render" v-bind=" columns">
        <template slot-scope="scope">
            <!-- 插槽渲染 -->
            <slot :name=" columns.slotName" :row="scope.row"></slot>
            <!-- 组件渲染 -->
            <render :render="columns.render" :row="scope.row"></render>
            <!-- 渲染标签 -->
            <span v-html=" columns.callback(scope.row)" v-if="columns.callback"></span>
        </template>
        <!-- 自定义表头 -->
        <template :slot="columns.headerSlotName?'header':''" slot-scope="scope">
            <slot :name=" columns.headerSlotName" :scope="scope"></slot>
        </template>
    </el-table-column>
    <!-- 正常渲染 -->
    <el-table-column v-else v-bind=" columns" :reserve-selection="true" :show-overflow-tooltip="true">
        <!-- 自定义表头 -->
        <template :slot="columns.headerSlotName?'header':''" slot-scope="scope">
            <slot :name=" columns.headerSlotName" :scope="scope"></slot>
        </template>
    </el-table-column>
</template>

<script>
import render from "./render.vue"
export default {
    name: 'girdColumn',
    props: {
        columns: {
            default: () => {
                return {}
            },
            type: Object
        }
    },
    components: {
        render
    }
}
</script>

